<!-- 省市区级联选择 -->
<template>
  <view
    class="text-[30rpx] w-full flex justify-end items-center"
    :class="{ 'u-light-color': !province }"
    @click="openPopup">
    <text>{{ addressLabel }}</text>
    <text v-if="!province">
      {{ (disabled ? '-' : placeholder) }}
    </text>
    <i v-if="!disabled" class="iconfont rightArrow">&#xe60d;</i>
  </view>

  <u-picker
    :show="show"
    ref="addressPick"
    :columns="municipalities"
    keyName="name"
    @change="onChange"
    @cancel="closePopup"
    @confirm="confirm"></u-picker>
</template>

<script setup lang="ts">
import { getAddressList } from "@/api/organization";

const props = defineProps({
  // 省
  province: {
    type: String,
    default: ''
  },
  // 市
  city: {
    type: String,
    default: ''
  },
  // 区
  distincts: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['onChange', 'open'])

// 打开选择弹窗
const _that = getCurrentInstance()
const show = ref(false)
const openPopup = () => {
  if(props.disabled) return // 禁用
  show.value = true;
}
const closePopup = () => {
  show.value = false
}

interface AddressItemTypes {
  id: string;
  level: number;
  name: string;
}

// 省市区列表
const municipalities = ref<[AddressItemTypes[],AddressItemTypes[],AddressItemTypes[]]>([[],[],[]]);
// 获取省市区级联列表
const getList = async (level: number, pid?: string) => {
  let getParams = {
    level: level ?? 1,
    pid: pid ?? undefined
  }
  const { data } = await getAddressList(getParams);
  municipalities.value[getParams.level - 1] = data;
};

// 回显逻辑
const addressLabel = ref('');
const _init = async () =>{
  addressLabel.value = "";
  await getList(1); // 初始化省
  await getList(2,props.province || unref(municipalities)[0][0].id); // 初始化市
  await getList(3,props.city || unref(municipalities)[1][0].id); // 初始化区

  let _ids = [props.province, props.city, props.distincts];
  let _indexs = unref(municipalities).map((data,index)=>{
    let curIndex = data.findIndex(v=> v.id === unref(_ids)[index]);
    addressLabel.value += data[curIndex]?.name ?? '';
    return curIndex < 0 ? 0 : curIndex
  });

  (_that?.refs.addressPick as any).setIndexs(_indexs); // 设置默认选中下标
  (_that?.refs.addressPick as any).setLastIndex(_indexs); // 回显需设置上次选中下标数组,否则u-pick出现首次滚动回弹bug
}
_init();


// 上级变化,查询对应的子级
const onChange = async (e: any) => {
  const { columnIndex, index } = e;
  
  let _indexs = (_that?.refs.addressPick as any).getIndexs();
  if(columnIndex === 0) {
    await getList(2,unref(municipalities)[0][index].id);
    await getList(3,unref(municipalities)[1][0].id);
    (_that?.refs.addressPick as any).setIndexs([index,0,0]); // 设置默认选中下标
  }else if (columnIndex === 1){
    await getList(3,unref(municipalities)[1][index].id);
    (_that?.refs.addressPick as any).setIndexs([_indexs[0],index,0]); // 设置默认选中下标
  }else if (columnIndex === 2){ 
    (_that?.refs.addressPick as any).setIndexs(_indexs); // 设置默认选中下标
  }
};

// 选中更新绑定值
const confirm = (currentItems: { value: AddressItemTypes[]}) => {
  const { value } = currentItems;
  
  addressLabel.value = `${value[0].name}${value[1].name}${value[2] ? value[2].name : ''}`
  emits('onChange', {
    province: value[0].id,
    city: value[1].id,
    distincts: value[2] ? value[2].id : '' // 存在部分城市没有三级
  })
  closePopup()
}
</script>